<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">凡冉水综合管理</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">

                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="username" tabindex="1">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>

                <!--                <el-form-item prop="username">-->
                <!--                    <el-input v-model="ruleForm.rememberMe" placeholder="username" tabindex="1">-->
                <!--                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->

                <el-form-item prop="password">
                    <el-input
                            type="password"
                            placeholder="password"
                            v-model="ruleForm.password"
                            @keyup.enter.native="userMessage()"
                            tabindex="2">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>

                <el-checkbox v-model="ruleForm.rememberMe">rememberMe记住我功能</el-checkbox>

                <el-checkbox v-model="checked" @change="setcookie()">是否记住账户名和密码</el-checkbox>
                <div class="login-btn">
                    <el-button type="primary" @click="userMessage()">登录</el-button>
                </div>

            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                checked: false,
                ruleForm: {
                    username: "",
                    password: "",
                    rememberMe: false
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: "请输入用户名",
                            trigger: "blur"
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: "请输入密码",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        created() {
            this.ruleForm.username = this.getcookie('username');
            this.ruleForm.password = this.getcookie('password');
        },
        methods: {
            setcookie() {
                if (this.checked == true) {
                    document.cookie = "username=" + this.ruleForm.username;
                    document.cookie = "password=" + this.ruleForm.password;
                } else {
                    document.cookie =
                        "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
                    document.cookie =
                        "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
                }
            },
            getcookie(name) {
                var strcookie = document.cookie; //获取cookie字符串
                var arrcookie = strcookie.split("; "); //分割
                for (var i = 0; i < arrcookie.length; i++) {
                    var arr = arrcookie[i].split("=");
                    if (arr[0] == name) {
                        return arr[1];
                    }
                }
                return "";
            },
            userMessage(formName) {
                var res = this;


                this.$axios({
                    url: "/api/login",
                    method: "post",

                    data: {
                        username: res.ruleForm.username,
                        password: res.ruleForm.password,
                        rememberMe: res.ruleForm.rememberMe
                    }
                })
                    .then(function (response) {

                        if (response.data.code === 400){

                            alert(response.data.message);

                        }

                        if (response.data.code <= 200) {

                            localStorage.setItem("ms_username", res.ruleForm.username);
                            localStorage.setItem("list", JSON.stringify(response.data.data));
                            localStorage.setItem("roleType", response.data.data.roleType);
                            localStorage.setItem("loginId", response.data.data.loginId);

                            // localStorage.setItem("jwtToken", response.data.jwtToken)
                            // alert(response.data.jwtToken);
                            res.$router.push('/ProcessDefinition');

                        }
                    })
                    .catch(function (error) {
                    });

            }
        }
    };
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/login-bg.jpg);
        background-size: 100%;
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .ms-content {
        padding: 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>
